<template>
  <el-table
    :data="tableData"
    border
    style="width: 100%"
  >
    <el-table-column
      label="名称"
      width="180"
    ><template v-slot="scope">
      <span style="font-weight: bold;">{{ scope.row.name }}</span>
    </template>
    </el-table-column>
    <el-table-column
      label="内容"
    ><template v-slot="scope">
      <el-checkbox-group v-model="scope.row.checked">
        <el-checkbox label="1">配柜内销</el-checkbox>
        <el-checkbox label="2">包装外销</el-checkbox>
        <el-checkbox label="3">备品备件</el-checkbox>
        <br>
        <el-checkbox label="4">出厂报告、二次图纸、使用说明书齐全</el-checkbox>
      </el-checkbox-group>
    </template>
    </el-table-column>
  </el-table>
</template>
<script>
/**
 * @Date: 2022/4/4
 */

export default {
  name: 'Question12',
  model: {
    prop: 'modelValue',
    event: 'change'
  },
  props: {
    modelValue: {
      type: Object,
      default: () => {}
    }
  },
  data() {
    return {
      startWatchFlag: false,
      tableData: [{
        name: '产品下线报告打印',
        checked: []
      }]
    }
  },
  watch: {
    tableData: {
      handler(newVal, oldVal) {
        if (!this.startWatchFlag) return
        const data = newVal[0].checked
        const rt = {
          check1: '□',
          check2: '□',
          check3: '□',
          check4: '□'
        }
        data.forEach((item) => {
          rt[`check${item}`] = '√'
        })
        let flag = false
        for (const key in rt) {
          if (rt[key] === '□') {
            flag = true
            break
          }
        }
        if (flag) {
          rt.fe = '未填写完整'
        } else {
          rt.fe = ''
        }
        this.$emit('change', rt)
      },
      deep: true
    }
  },
  created() {
    if (Object.keys(this.modelValue).length === 0) {
      this.$emit('change', {
        check1: '□',
        check2: '□',
        check3: '□',
        check4: '□'
      })
    } else {
      for (let i = 1; i <= 4; i++) {
        if (this.modelValue[`check${i}`] === '√') {
          this.tableData[0].checked.push(i.toString())
        }
      }
    }
    this.startWatchFlag = true
  },
  methods: {
    print(x) {
      console.log(x)
    }
  }
}
</script>

<style scoped>

</style>
